Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@carbon/themes
Advanced tools
Themes for applying color in the Carbon Design System
To install @carbon/themes
in your project, you will need to run the following
command using npm:
npm install -S @carbon/themes
If you prefer Yarn, use the following command instead:
yarn add @carbon/themes
You can use @carbon/themes
in JavaScript or Sass by including this package in
your project. By default, @carbon/themes
provides a set of color tokens that
are pre-defined for a specific theme. Currently, we offer the following color
themes: white, gray 10, gray 90, gray 100 .
You can preview all of the token values for this on the Carbon Design System website .
If your project is using Sass, you can include this package and the corresponding default theme by writing the following in your Sass file:
@import '@carbon/themes/scss/themes';
By default, the white theme will be initialized. If you would like to include another theme, you can do so by setting the global theme variable and then calling our mixin. For example:
@import '@carbon/themes/scss/themes';
$carbon--theme: $carbon--theme--g10;
// Use the gray 10 theme
@include carbon--theme();
Inline theming can be done by using the mixin. For example:
@import '@carbon/themes/scss/themes';
// Use the default white theme here
.my-dark-theme {
@include carbon--theme($carbon--theme--g90) {
// Use the dark theme here
}
}
.my-darker-theme {
@include carbon--theme($carbon--theme--g100) {
// Use the darker theme here
}
}
If you're looking to use these themes in JavaScript, we export a variety of bindings for you to use, including:
import {
// An object of all themes
themes,
// Direct theme values
white,
g10,
g90,
g100,
// Specific token values
interactive01,
interactive02,
} from '@carbon/themes';
If you're looking for @carbon/themes
API documentation, check out:
If you're looking for more examples on how to use @carbon/themes
, we have some
examples that you can check out:
We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀
Licensed under the Apache 2.0 License.
This package uses IBM Telemetry to collect metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.
FAQs
Themes for applying color in the Carbon Design System
The npm package @carbon/themes receives a total of 67,552 weekly downloads. As such, @carbon/themes popularity was classified as popular.
We found that @carbon/themes demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 13 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.